<script setup lang="ts">
import useDetailStore from "@/store/modules/hospitalDetail";
import { storeToRefs } from "pinia";
const { hospitalInfo } = storeToRefs(useDetailStore());
</script>

<template>
  <div class="detail">
    <div class="top">
      <div class="title">{{ hospitalInfo.hospital.hosname }}</div>
      <div class="level">
        <svg
          t="1689859384317"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2361"
          width="16"
          height="16"
        >
          <path
            d="M832 364.8h-147.2s19.2-64 32-179.2c6.4-57.6-38.4-115.2-102.4-121.6h-12.8c-51.2 0-83.2 32-102.4 76.8l-38.4 96c-32 64-57.6 102.4-76.8 115.2-25.6 12.8-121.6 12.8-128 12.8H128c-38.4 0-64 25.6-64 57.6v480c0 32 25.6 57.6 64 57.6h646.4c96 0 121.6-64 134.4-153.6l51.2-307.2c6.4-70.4-6.4-134.4-128-134.4z m-576 537.6H128V422.4h128v480z m640-409.6l-51.2 307.2c-12.8 57.6-12.8 102.4-76.8 102.4H320V422.4c44.8 0 70.4-6.4 89.6-19.2 32-12.8 64-64 108.8-147.2 25.6-64 38.4-96 44.8-102.4 6.4-19.2 19.2-32 44.8-32h6.4c32 0 44.8 32 44.8 51.2-12.8 102.4-32 166.4-32 166.4l-25.6 83.2h243.2c19.2 0 32 0 44.8 12.8 12.8 12.8 6.4 38.4 6.4 57.6z"
            p-id="2362"
          ></path>
        </svg>
        <span>{{ hospitalInfo.hospital.param.hostypeString }}</span>
      </div>
    </div>

    <div class="content">
      <div class="left">
        <img
          :src="`data:image/jpeg;base64,${hospitalInfo.hospital.logoData}`"
          alt=""
        />
      </div>

      <div class="right">
       <svg t="1690092416345" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2654" width="25" height="25"><path d="M511.715374 956.115742c-59.949604 0-117.960515-11.762074-172.773581-34.946452-52.874372-22.384916-100.26244-54.363368-141.034966-95.125901s-72.740985-88.160595-95.125902-141.034967c-23.174384-54.703139-34.946452-112.823976-34.946452-172.77358 0-59.949604 11.762074-117.960515 34.946452-172.773581 22.384916-52.874372 54.353375-100.26244 95.125902-141.034966 40.762533-40.772526 88.150602-72.740985 141.034966-95.125902C393.644933 80.126009 451.765769 68.353941 511.715374 68.353941s117.970508 11.762074 172.77358 34.946452c52.874372 22.384916 100.26244 54.353375 141.034967 95.125902 40.762533 40.762533 72.740985 88.150602 95.125901 141.034966 23.174384 54.703139 34.946452 112.823976 34.946452 172.773581 0 59.949604-11.762074 117.970508-34.946452 172.77358-22.384916 52.874372-54.363368 100.26244-95.125901 141.034967-40.762533 40.762533-88.160595 72.740985-141.034967 95.125901-54.813065 23.294304-112.823976 34.946452-172.77358 34.946452z m0-814.4512c-99.003289 0-192.070577 38.603988-262.083401 108.606818-70.00283 70.00283-108.596824 163.070119-108.596825 262.073408 0 99.013282 38.593994 192.080571 108.596825 262.083401C319.634803 844.430999 412.702092 883.024993 511.715374 883.024993c99.003289 0 192.080571-38.593994 262.073407-108.596824 70.00283-70.00283 108.606818-163.070119 108.606818-262.083401 0-99.003289-38.593994-192.080571-108.606818-262.073408-70.00283-70.122749-163.070119-108.606818-262.073407-108.606818z m0 0" fill="#323333" p-id="2655"></path><path d="M511.715374 715.677756c-112.134441 0-203.382955-91.238521-203.382955-203.382955 0-112.134441 91.248514-203.263036 203.382955-203.263035 112.134441 0 203.382955 91.128595 203.382955 203.263035 0 112.144434-91.248514 203.382955-203.382955 203.382955z m0-333.565234c-71.831598 0-130.302199 58.470601-130.302199 130.302199s58.470601 130.302199 130.302199 130.302198 130.302199-58.470601 130.302198-130.302198c0-71.951517-58.470601-130.302199-130.302198-130.302199z m-1.149226-153.256731c20.216378 0 36.545375-16.328997 36.545375-36.545375V37.015058c0-20.216378-16.328997-36.545375-36.545375-36.545374s-36.545375 16.328997-36.545375 36.545374v155.305351c0 20.206384 16.33899 36.535381 36.545375 36.535382z m1.149226 566.758102c-20.216378 0-36.545375 16.328997-36.545375 36.545375v155.305351c0 20.216378 16.328997 36.535381 36.545375 36.535381s36.535381-16.328997 36.535381-36.535381V832.159268c0-20.216378-16.328997-36.545375-36.535381-36.545375z m0 0M228.396282 512.804458c0-20.216378-16.328997-36.545375-36.545375-36.545375H36.545557c-20.216378 0-36.545375 16.328997-36.545375 36.545375s16.328997 36.535381 36.545375 36.535381h155.30535c20.096458 0.009993 36.545375-16.319004 36.545375-36.535381z m566.638183-1.139232c0 20.216378 16.328997 36.535381 36.535382 36.535381h155.305351c20.216378 0 36.545375-16.328997 36.545374-36.535381 0-20.216378-16.328997-36.545375-36.545374-36.545375H831.569847c-20.096458 0-36.535381 16.448916-36.535382 36.545375z m0 0" fill="#323333" p-id="2656"></path></svg>
        <div class="place">
          <p>具体地址：{{ hospitalInfo.hospital.param.fullAddress }}</p>
          <p>规划路线：{{ hospitalInfo.hospital.route }}</p>
        </div>
      </div>
    </div>
  </div>
  <div class="info">
    医院介绍：{{ hospitalInfo.hospital.intro || "暂无医院介绍"  }}
  </div>
</template>

<style lang="scss" scoped>
.detail {
  .top {
    display: flex;
    align-items: center;

    .title {
      font-size: 35px;
      margin-right: 30px;
    }

    .level {
      display: flex;
      align-items: center;
      color: #7f7f7f;

      span {
        margin-left: 10px;
      }
    }
  }

  .content {
    display: flex;
    margin-top: 35px;

    .left {
      width: 80px;

      img {
        width: 100%;
        height: 80px;
        border-radius: 50%;
      }
    }

    .right {
      flex: 1;
      display: flex;
      margin-left: 30px;

      .place {
        margin-left: 20px;
        p {
          color: #7f7f7f;
          margin-bottom: 20px;
        }
      }
    }
  }
}

.info {
  line-height: 30px;
  color: #7f7f7f;
  margin-top: 25px;
  font-size: 18px;
}
</style>
